<template>
    <div class="qualificationEdit">
        <h5 v-if="true">编辑资质</h5>
        <h5 v-else>添加资质</h5>
        <ul class="items">
            <li class="item">
                <span class="first-name">资质名称：</span>
                <input type="text" v-model="name">
            </li>
            <li class="item">
                <span class="first-name">资质图片：</span>
                <div class="img-box" v-if="receiveData.content">
                    <span class="dele" @click="dele">x</span>
                    <img :src="receiveData.content" alt="">
                </div>
                <el-upload
                    v-else
                    class="upload-demo"
                    action="uploadurl"
                    list-type="picture-card"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :before-upload="beforeUpload"
                    :http-request="uploadHttp"
                    :file-list="fileList">
                    <i class="el-icon-plus"></i>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过300kb</div>
                </el-upload>
                
            </li>
            <li class="btn-box">
                <span class="first-name"></span>
                <span class="my-btn" style="padding-left:30px;padding-right:30px;" @click="goqualification">取消</span>
                <span class="my-btn my-background" style="margin-left:30px;padding-left:30px;padding-right:30px;" @click="upload">上传</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            type:1,
            receiveData:'',
            name:'',
            id:'',
            //上传图片
            actionUrl:'',
            dataList: "",
            fileList:[],
            fileUpUrlList:'',
            VipShopEntity:'',
            isLt2M:'',
        }
    },
    mounted(){
        this.type=this.$route.query.type
        this.receiveData=this.$route.query.receiveData
        if(this.receiveData){
            this.name=this.receiveData.name
            this.id=this.receiveData.id
            this.fileUpUrlList=this.receiveData.content
        }
        console.log('this.type',this.type,this.receiveData)
    },
    methods:{
        dele(){
            this.receiveData=''
        },
        //删除图片
        handleRemove(file, fileList) {
            console.log(file, fileList);
            fileList.forEach(e => {
                for(var i=0;i<this.fileUpUrlList.length;i++){
                    if(this.fileUpUrlList[i].uid!=e.uid){
                        this.fileUpUrlList.splice(i,1)
                    }
                }
            });
            console.log('this.fileUpUrlList',this.fileUpUrlList)
        },
        handlePreview(file) {
            console.log(file);
        },
        //提示上传文件个数
        handleExceed(files, fileList) {
            console.log(files)
            this.$message.warning("只能上传一个文件，请先删除，再上传新文件！");
        },
        //删除提示
        beforeRemove(file, fileList) {
            if(!this.isLt2M){
                return this.$alert('只能上传jpg/png文件，且不超过300kb', '图片上传限制', {confirmButtonText: '确定',});
            }
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //提示上传文件大小
        beforeUpload(file){
            const isLt2M = file.size / 1024 / 1024 < 0.3;
            this.isLt2M=isLt2M
            console.log(file.size,isLt2M)
            if (!isLt2M) {
                // this.common.errorTip('上传文件大小不能超过 2MB!');
                // this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        uploadHttp(params){
            var  formData = new FormData();
            formData.append('file', params.file);
            this.axios.post('/operate/upload/file', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                this.fileUpUrlList=res.data.data
            })
        },
        //上传
        upload(){
            if(this.name){
                var labelEntity={
                    "content": "",
                    "id": 0,
                    "name": ""
                }
                labelEntity.name=this.name
                labelEntity.content=this.fileUpUrlList
                labelEntity.id=this.id
                if(this.id){
                    var url='/operate/sys/Certificate/update'
                }else{
                    var url='/operate/sys/Certificate/Save'
                }
                this.axios({
                    url:url,
                    method:'post',
                    data:JSON.stringify(labelEntity),
                    headers: {'Content-Type': 'application/json;charset=UTF-8'}
                }).then(res=>{
                    this.fileUpUrlList=''
                    this.$router.push('/index')
                })
            }
        },
        //取消
        goqualification(){
            this.$router.push('/index')
        }
    }
}
</script>

<style scoped>
.items{
    margin-top: 40px;
}
.items .item{
    margin:40px 10px;
    display: flex;
}
.first-name{
    display: inline-block;
    width: 100px;
}
.btn-box{
    margin-top: 100px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}
.img-box{
    width: 146px;
    height: 146px;
    border: 1px dashed #c0ccda;
    overflow:hidden;
    border-radius: 6px;
    position: relative;
}
.img-box img{
    width: 140px;
    height: 140px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 6px;
    transform: translate(-50%,-50%);
}
.img-box .dele{
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height:16px ;
    border-radius: 50%;
    background: rgba(95, 91, 91, 0.527);
    color: aliceblue;
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 99;
}
</style>